<template>
    <div class="register">
        <MyHead title="注册bilbil" >
            <van-icon @click="gotoback" name="revoke" :size="22*dpr" color="#f50" />
        </MyHead>
        <div  class="myform">
            <van-form 
                validate-first
                @submit="onSubmit"
                @failed="onfail"
                ref="form"
                >
            <van-field
                v-model="form.username"
                name="username"
                label="用户名"
                placeholder="请输入用户名"
                clearable
                left-icon="user-o"
                :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                v-model="form.phone"
                name="phone"
                label="手机号"
                placeholder="请输入常用手机号"
                clearable
                left-icon="phone-o"
                :rules="[
                    { required: true, message: '请填写手机号' },
                    {
                        pattern:reg.phone,message:'请输入正确的手机号'
                    }
                ]"
            />
            <PassInput
                    v-model="form.password"
                    name="password"
                    label="密码"
                    placeholder="密码"
                    @blur="checkdbpass"
                    :rules='[
                        { required: true, message: "请填写密码" },
                        {
                            pattern:reg.pwd,message:"请输入6-16的数字字母组合的密码"
                        }
                    ]'
                />
                <PassInput
                    v-model="form.dbpass"
                    name="dbpass"
                    label="确认密码"
                    placeholder="确认密码"
                    :rules="[
                        { required: true, message: '请填写确认密码' },
                        {
                            pattern:reg.pwd,message:'请输入6-16的数字字母组合的密码'
                        },
                        {
                            validator:checkPassCommon,message:'两次密码不一致'
                        }
                    ]"
                />
            <div class="linkitems" style="margin: 16px;">
                <router-link class="cm" :to="{name:'login'}">登录</router-link>
                <router-link class="co" :to="{name:'findpass'}">找回密码</router-link>
            </div>
            <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit" color="#fb7299">注册</van-button>
                </div>
                <div style="margin: 16px;">
                    <van-button round block type="danger" native-type="button" @click="restData">重置</van-button>
                </div>
            </van-form>
        </div>
        
    </div>
</template>

<script>
export default {
    data(){
        return {
            form:{},
            type:'password'
        }
    },
    methods:{
        async onSubmit(value) {
            console.log(value);
            //ajax 
            let res = await this.$ajax.findUser({username:value.username})  // 用户名查询
            let res1 = await this.$ajax.findUser({phone:value.phone})  // 手机号查询
            console.log(res)
            console.log(res1)
            if(res.length > 0 || res1.length >0 ){
                 this.ShowFail('用户名或手机号已被注册')
            }else{
                // 没有就注册
                let res2 = await this.$ajax.addUser(value)
                console.log(res2);
                this.ShowSuccess("注册成功")
                this.$router.push({name:"login",query:value})
            }
        },
     changeType() {
            this.type = (this.type == "password" ? "text" : "password");
        },
        checkPassCommon(value){
            //密码和确认密码的正则全部正确才去比较密码的一致性
            if(this.reg.pwd.test(value ) && this.reg.pwd.test(this.form.password) ) {
                return value == this.form.password
            }
        },
        // 上面的密码失焦判断 2次密码一致
        checkdbpass(value){
            if(this.reg.pwd.test(value) && this.reg.pwd.test(this.form.dbpass)){
                this.$refs.form.validate('dbpass')  // 调起dbpass 确认密码框的 正则 
            }
        },
        onfail(){
            // Toast.fail('校验失败');
            this.$toast.fail("校验失败")
        },
        getMsg(){
            this.$ajax.testMsg()
            .then(res=>{
                console.log(res);
                this.$notify({type:'success',message:res[0]})
            })
        },
        restData(){
            this.form = {}
        }
    },
    mounted(){
        // this.getMsg()
    }
}
</script>

<style lang="scss" scoped>
    .van-button--round::v-deep {
      background: #ff9db5;;
      border-radius: 4px;
      border: 1px solid #fb7299;
    }
    .register{
        .myform{
            padding:15px;
            .linkitems{
                display: flex;
                justify-content: space-evenly;
                font-size: 12px;
                margin-top:20px;
                .cm{
                    text-align: center;
                    width: 60px;
                    height: 20px;
                    line-height: 20px;
                    background: skyblue;
                    border-radius: 10px;
                    color:#fb7299;
                }
                .co{
                   
                    text-align: center;
                    width: 60px;
                    height: 20px;
                    line-height: 20px;
                    background: #fb7299;
                    border-radius: 10px;
                    color:skyblue;
                }
            }
        }
    }
    </style>